<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
		   
		<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
		   
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>



	</head>
	<body>
		</head>
		<!-- 实现带下拉菜单的标签页导航  -->
		<!-- 实现带下拉菜单的标签页导航  -->
		<body class="container ">
			<h3 class="mb-3">东华理工大学</h3>
			<div class="row">
				<ul class="nav nav-pills  nav-fill flex-column">
					<li class="nav-item">
						<a class="nav-link active btn-dark" href="#">文艺作品</a>
					<li>
					</li>
					<li class="nav-item ">
						<button class="nav-link btn-info btn-sm " href="#jigou" data-toggle="pill">个人传记</button>
					<li>
					<li class="nav-item">
						<a class="nav-link btn-primary" href="#jigou" data-toggle="pill">专业著作</a>
					<li>
					<li class="nav-item">
						<a class="nav-link disabled btn-warning" href="#yuanxi" data-toggle="pill">图文写真书</a>
					<li>
						<!-- “学校概况”设置为下拉菜单，选项分别为“学校简介”，“现任领导”，“历任领导”，“信息公开” -->
					<li class="nav-item dropdown ">
						<div class="dropright ">
							<button class="btn-success nav-link dropdown-toggle " type="button" data-toggle="dropdown"
								data-offset="200,20">实用类大众图书</button>
							<div class="dropdown-menu dropright">
								<button class="dropdown-item  " href="#" active>财经</button>
								<a class="dropdown-item " href="#">健康</a>
								<a class="dropdown-item " href="#">职场</a>
								<div class="dropdown-divider"></div>
								<button class="dropdown-item  " href="#" disabled>美食</button>
							</div>
						</div>
					</li>
				</ul>

		</body>

</html>
